import { Engine, HemisphericLight, Vector3, Sprite, Scene, ArcRotateCamera, PointLight, StandardMaterial, Texture, ShaderMaterial, IAnimationKey, AssetsManager, MeshAssetTask, AbstractMesh, PickingInfo, Mesh, Animation } from 'babylonjs'
import 'babylonjs-loaders';


// 动画
export class Animate {
  private dom: HTMLCanvasElement
  private engine: Engine
  private scene: Scene
  private camera: ArcRotateCamera

  constructor(dom: HTMLCanvasElement) {
    this.dom = dom
    this.engine = new Engine(this.dom, true)  // 设置引擎
    this.scene = new Scene(this.engine)   // 创建场景
    this.camera = new ArcRotateCamera("Camera", 1, 0.8, 100, Vector3.Zero(), this.scene); // 创建相机
    this.camera.attachControl(this.dom, false)  // 把相机放到画布

    // 创建半球光
    const light = new HemisphericLight('light', new Vector3(1, 1, 0), this.scene);
    const box = Mesh.CreateBox('box', 20, this.scene)

   
    // 创建动画对象
    const animationBox = new Animation('a', "rotation.x", 60, Animation.ANIMATIONTYPE_FLOAT, Animation.ANIMATIONLOOPMODE_RELATIVE)
    const animationBox2 = new Animation('b', "rotation.y", 60, Animation.ANIMATIONTYPE_FLOAT, Animation.ANIMATIONLOOPMODE_RELATIVE)
    // const animationBox2 = new Animation('b','')
    // box.rotation

    const keys: IAnimationKey[] = []

    keys.push({
      frame: 0,
      value: 1
    })

    keys.push({
      frame: 20,
      value: 1.1
    })

    // keys.push({
    //   frame: 40,
    //   value: 1
    // })

    animationBox.setKeys(keys)
    animationBox2.setKeys(keys)

    box.animations = []
    box.animations.push(animationBox)
    box.animations.push(animationBox2)

    this.scene.beginAnimation(box, 0, 100, true)


    window.addEventListener('resize', () => {
      this.engine.resize();
    })
  }
  render() {
    // 引擎渲染场景
    this.engine.runRenderLoop(() => {
      this.scene.render()
    })
  }
}


